<template>
    <div class="header">
        <img src="../../../static/images/logo_2.png" alt="" class="logoImg">
        <span class="flatManage">平台管理</span>
        <img src="../../../static/images/LOVE.jpg" alt="" class="personImg">
        <span class="manageName">admin</span>
    </div>
</template>
<script>
    export default {
        name: "headBar"
    }
</script>
<style lang="scss">
    .header {
        width: 100%;
        height: 80px;
        line-height: 80px;
        position: absolute;
        top: 0;
        left: 0;
        background-image: linear-gradient(90deg, #78afcd 0%, #3ee9bc 100%), linear-gradient( #e5ecfe, #e5ecfe);
        background-blend-mode: normal, normal;
        box-shadow: 0px 0px 8px 0px rgba(61, 193, 236, 0.4);
        .logoImg {
            position: relative;
            left: 24px;
            top: 5px;
            width: 126px;
            height: 35px;
        }
        .personImg {
            position: absolute;
            right: 98px;
            top:24px;
            width: 36px;
            height: 36px;
            border-radius: 18px;
            
            box-shadow: 0px 0px 6px 0px rgba(22, 76, 63, 0.4);
        }
        .manageName{
            position: absolute;
            right: 42px;
             font-family: 'MicrosoftYaHei';
            font-size: 14px;
            letter-spacing: 1px;
            color: #ffffff;
        }
        .flatManage {
            position: relative;
            font-family: 'MicrosoftYaHei';
            font-size: 24px;
            font-weight: bold;
            letter-spacing: 1px;
            color: #ffffff;
            left: 36px;
        }
    }
</style>
